<template>
	<div>
		<template>
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="first">
					<el-form ref="form" :model="user" label-width="80px">
						<el-form-item label="昵称">
							<el-col :span="5">
								<el-input v-model="user.username" maxlength="8"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio-group v-model="user.sex">
								<el-radio label="男"></el-radio>
								<el-radio label="女"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="出生日期">
							<el-col :span="4">
								<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期" v-model="user.birthday" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-form-item>
						<el-form-item label="个性签名">
							<el-col :span="11">
								<el-input type="textarea" v-model="user.description" maxlength="80"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item>
							<el-button @click="Onsubmit" class="button">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="安全信息" name="second">
					<table style="margin-left: 40px;height: 280px;width: 400px;border: 0px solid black;">
						<tr>
							<td width="45px">余额</td>
							<td> {{user.balance}}
								<el-button size="small" @click="dialogVisibleMoney = true" round>充值</el-button>
							</td>
						</tr>
						<tr>
							<td width="45px">账号</td>
							<td> 
								<el-button size="small" @click="dialogVisiblePass = true" round>修改密码</el-button>
							</td>
						</tr>
						<tr>
							<td>手机</td>
							<td> {{user.userTel}}
								<el-button size="small" round>手机号暂不可修改</el-button>
							</td>
						</tr>
						<tr>
							<td>邮箱</td>
							<td v-if="!user.email">
								<el-button size="small" class="button" @click="dialogVisibleEmail = true" round v-if="user.email==''?false:true">绑定邮箱</el-button>
							</td>
							<td v-else>{{user.email}}</td>
						</tr>
						<tr>
							<td>QQ</td>
							<td v-if="!user.qq">
								<el-button size="small" class="button" @click="dialogVisibleQQ = true" round v-if="user.qq==''?false:true">绑定QQ</el-button>
							</td>
							<td v-else>{{user.qq}}</td>
						</tr>
						<tr>
							<td>微信</td>
							<td>如需绑定请在APP操作</td>
						</tr>
					</table>
					<el-dialog title="修改密码" :visible.sync="dialogVisiblePass" width="25%" :before-close="handleClose">
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="登陆密码" prop="loginpass">
								<el-input type="password" v-model="ruleForm.loginpass" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="新密码" prop="pass">
								<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="checkPass">
								<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitFormPass('ruleForm')">提交</el-button>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-dialog title="绑定邮箱" :visible.sync="dialogVisibleEmail" width="30%" :before-close="handleClose">
						<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
							<el-form-item prop="email" label="邮箱" :rules="[
							      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
							      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
								<el-input v-model="dynamicValidateForm.email"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
								<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-dialog title="绑定QQ" :visible.sync="dialogVisibleQQ" width="30%" :before-close="handleClose">
						<el-form label-width="100px" class="demo-ruleForm">
							<el-form-item label="输入您的QQ号" prop="name">
								<el-input v-model="qq"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisibleQQ = false">取 消</el-button>
							<el-button type="primary" @click="QQ()">确 定</el-button>
						</span>
					</el-dialog>
					<el-dialog title="充值" :visible.sync="dialogVisibleMoney" width="30%" :before-close="handleClose">
						<el-form label-width="150px" class="demo-ruleForm">
							<el-form-item label="您需充值的数额" prop="name">
								<el-input-number v-model="money" :min="1" :max="100" label="金额"></el-input-number>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisibleMoney = false">取 消</el-button>
							<el-button type="primary" @click="addMoney()">确 定</el-button>
						</span>
					</el-dialog>
				</el-tab-pane>
			</el-tabs>
		</template>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			var validatePass0 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入登陆密码'));
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				activeName: 'first',
				user: {},
				qq: '',
				money:'',
				dynamicValidateForm: {
					email: ''
				},
				dialogVisiblePass: false,
				dialogVisibleEmail: false,
				dialogVisibleQQ: false,
				dialogVisibleMoney: false,
				ruleForm: {
					loginpass: '',
					pass: '',
					checkPass: '',
				},
				rules: {
					loginpass: [{
						validator: validatePass0,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			//QQ
			QQ:function(){
				this.user.qq=this.qq;
				this.Onsubmit();
				this.dialogVisibleQQ = false
			},
			//充值
			addMoney:function(){
				this.user.balance=(Number) (this.user.balance+ this.money);
				this.Onsubmit();
				this.dialogVisibleMoney = false;
				// alert(this.user.balance)
			},
			//密码
			submitFormPass(ruleForm){
				var _this = this;
				$.ajax({
					url: "http://localhost/user/pass",
					data:{"userId":(Number)(sessionStorage.getItem("userId")),"loginPass":_this.ruleForm.loginpass,"pass":_this.ruleForm.pass},
					type: "post",
					success: function(data) {
						if(data.code=="200"){
							alert("修改成功！");
							_this.dialogVisiblePass = false;
						}else{
							alert("密码错误")
						}
					}
				});
			},
			//邮箱
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.user.email=this.dynamicValidateForm.email;
						this.Onsubmit();
						this.dialogVisibleEmail = false
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			selectUser: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/user/"+sessionStorage.getItem("userId") ,
					// sessionStorage.getItem("user")
					type: "get",
					contentType: "application/json;charset=utf-8",
					success: function(data) {
						_this.user = data.data;
					}
				});
			},
			Onsubmit: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/user/update",
					type: "put",
					data: _this.user,
					success: function(data) {
						if (data.code == "200") {
							alert("保存成功");
						}
					}
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
		},
		created() {
			this.selectUser();
		}
	};
</script>

<style>
	.button {
		background-color: #52C29A;
		color: white;
	}
</style>
